<template>
  <el-dialog title="编辑艺人填写字段" :visible.sync="visible" width="660px" append-to-body :close-on-click-modal="false">
    <el-button type="primary" size="small" style="margin-bottom: 16px" plain @click="addKeys">添加字段</el-button>
    <el-row :gutter="10" v-for="(item, index) in keys" :key="index" style="margin-bottom: 16px">
      <el-col :span="14">
        字段名称：<el-input style="width: 260px" v-model="item.key" placeholder="请输入字段名称" />
      </el-col>
      <el-col :span="8">
        <div style="width: 100%;display: flex;align-items: center;">
          <div style="min-width:80px">是否必填：</div><el-select v-model="item.require" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

      </el-col>
      <el-col :span="2"> <el-button type="text" @click="del(index)">删除</el-button></el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleKeySubmit">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { diyKeyLinkPro } from '@/api/system/project'
export default {
  name: 'ComponentName',
  data() {
    return {
      visible: false,
      keys: [],
      id: '',
      options: [
        {
          value: 'yes',
          label: '是'
        },
        {
          value: 'no',
          label: '否'
        }
      ],
      columnIndex: 0
    }
  },
  methods: {
    /** 按钮操作 */
    handleKeySubmit() {
      const projectInfo = JSON.stringify(this.keys)
      diyKeyLinkPro({
        id: this.id,
        projectInfo
      }).then(res => {
        this.$modal.msgSuccess('修改成功')
        this.$emit('update')
        this.cancel()
      })
    },
    open(row) {
      this.visible = true
      this.id = row.id
      this.keys = row.projectInfo ? JSON.parse(row.projectInfo) : []
      const kes_length = this.keys.length;
      if (kes_length) {
        const d = this.keys[kes_length - 1]['column_id'] || '';
        const lastIndex = d.split('_')[2];
        this.columnIndex = lastIndex ? parseInt(lastIndex) : 0;
      } else {
        this.columnIndex = 0;
      }
    },
    cancel() {
      this.visible = false
    },
    addKeys() {
      this.columnIndex = this.columnIndex + 1;//先自增
      // const cindex = this.columnIndex + 1;
      this.keys.push({
        column_id: 'pid_' + this.id + '_' + this.columnIndex,
        key: '',
        require: 'no',
        value: ''
      })
    },
    del(index) {
      this.keys.splice(index, 1)
    }
  },
  created() {
    // Lifecycle hook
  },
  mounted() {
    // Lifecycle hook
  }
}
</script>

<style scoped>
/* Your styles here */
</style>
